<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimeCat Iframe Demo</title>

    <style>
        body {
            margin: 0;
        }

        .iframe-container {
            margin-top: 20px;
            padding-bottom: 20px;
            background: white;
            border: 3px solid grey;
            text-align: center;
        }

        iframe {
            max-width: 100%;
            width: 280px;
            display: inline-block;
            margin: 30px
        }

        @media only screen and (max-width: 500px) {
            iframe {
                padding: 0;
            }
        }

        .container {
            margin: 20px 0;
            padding: 20px;
            border: 3px solid grey;
        }

        number {
            margin-left: 10px;
        }

        h2 {
            margin-top: 0;
        }

        #replay {
            border: 1px solid grey;
            padding: 2px 10px;
            margin: 10px;
            color: red;
            font-weight: bold;
            cursor: pointer;
        }

        #replay.locked {
            color: rgb(205, 203, 203);
            border-color: rgb(205, 203, 203);
        }


        #replay.hide {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <a style="position: absolute; z-index: 100; right: 0" href="https://github.com/oct16/TimeCat">
        <img width="100" height="100"
            src=""
            alt="Fork me on GitHub" />
    </a>
    <!--hidden--><button id="replay" class="locked">Replay</button>
    <div class="container">
        <h2>Window</h2>
        <button>Number ++</button>
        <number>0</number>

        <div class="iframe-container">
            <iframe src="./iframe-1.html" align="top" onload="resizeIframe(this)" frameborder="0"></iframe>
            <iframe src="./iframe-2.html" align="top" onload="resizeIframe(this)" frameborder="0"></iframe>
        </div>
    </div>

    <script id="timecat" src="./timecat.global.js"></script>

    <script>
        function resizeIframe(target) {
            target.height = target.contentDocument.documentElement.offsetHeight
        }
        window.onresize = function () {
            setTimeout(() => {
                Array.from(window.frames).forEach(frame => {
                    resizeIframe(frame.frameElement)
                })
            }, 250)
        }

        const { Recorder } = TimeCat
        const recorder = new Recorder()
        const replayButton = document.getElementById('replay')
        if (replayButton) {
            setTimeout(() => {
                replayButton.className = ''
            }, 5000);
            replayButton.addEventListener('click', () => {
                if (replayButton.className) {
                    return
                }
                replayButton.className = 'hide'
                recorder.destroy()
                window.open('replay.html')
            })
        }

        const container = document.querySelector('.container');
        const number = container.querySelector('number')
        const button = container.querySelector('button')
        button.addEventListener('click', () => {
            number.innerHTML = Number(number.innerHTML) + 1
        })
    </script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-151180797-1"></script>
    <script>
        if (!~['localhost', '127.0.0.1'].indexOf(document.location.hostname)) {
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());
            gtag('config', 'UA-151180797-1');
        }
    </script>
</body>

</html>
